<template>
  <div class="body" style="position:relative;">
    <div class="tuding">
      <img src="../../assets/image/tuding.png" alt="" />
    </div>
    <!-- 面包屑区域 -->
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="#">内容管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>失物管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片组件 -->
    <el-card class="box-card">
      <!-- 搜索部分 -->
      <el-row :gutter="20" style="margin-top:20px;">
        <el-col :span="8" style="margin-left:20px;">
          <el-input
            placeholder="请输入"
            v-model="query"
            clearable
            @clear="getTiewenlist()"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getTiewenlist()"
            ></el-button> </el-input
        ></el-col>
      </el-row>
      <div class="biaobailogo">
        <img src="http://localhost:8090/find.png" alt="" />
      </div>
      <!-- 表白墙内容表格 -->
      <el-table
        :data="list"
        style="width: 100%"
        stripe
        align="center"
        show-overflow-tooltip
      >
        <el-table-column width="50" type="index"> </el-table-column>
        <el-table-column prop="fname" label="失物名称" width="100">
        </el-table-column>
        <el-table-column prop="fplace" label="拾到地点" width="100">
        </el-table-column>
        <el-table-column prop="fdate" label="拾到时间" width="100">
        </el-table-column>

        <el-table-column prop="fpeople" label="联系人信息" width="100">
        </el-table-column>
        <el-table-column prop="fcontact" label="联系方式" width="120">
        </el-table-column>
        <el-table-column label="物品图片" width="130">
          <template slot-scope="scope">
            <div v-if="scope.row.furl != null">
              <el-image
                style="height:50px;"
                :src="scope.row.furl"
                fit="fill "
              ></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="finformation" label="物品描述" width="180">
        </el-table-column>
        <el-table-column prop="ftime" label="发布时间" width="110">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-tooltip
              effect="light"
              content="编辑"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="
                  editcontent(
                    scope.row.fno,
                    scope.row.fname,
                    scope.row.fplace,
                    scope.row.fdate,
                    scope.row.fpeople,
                    scope.row.fcontact,
                    scope.row.finformation,
                    scope.row.ftime,
                    scope.row.lurl
                  )
                "
              ></el-button>
            </el-tooltip>
            <!-- 删除按钮 -->
            <el-tooltip
              effect="light"
              content="删除失物"
              placement="top"
              :enterable="false"
            >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="deletetiewen(scope.row.fno)"
              ></el-button>
            </el-tooltip>

            <el-tag
              @click="validate(scope.row.fno, scope.row.flag)"
              v-if="scope.row.flag == 0"
              type="danger"
              style="cursor: pointer;"
              >待审核</el-tag
            >
            <el-tag
              @click="validate(scope.row.fno, scope.row.flag)"
              v-if="scope.row.flag == 1"
              type="success"
              style="cursor: pointer;"
              >已通过</el-tag
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页部分 -->
    </el-card>
    <!-- 修改用户的对话框 -->
    <el-dialog
      title="编辑内容"
      :visible.sync="edituservisible"
      width="40%"
      @close="resetform"
      top="10vh"
    >
      <!-- 内容主题区域 -->
      <el-form
        :model="editform"
        :rules="editformrule"
        ref="editFormRef"
        width="500px"
        label-width="100px"
      >
        <el-form-item label="物品序号">
          <el-input v-model="editform.fno" disabled></el-input>
        </el-form-item>
        <el-form-item label="物品名称">
          <el-input v-model="editform.fname" disabled></el-input>
        </el-form-item>
        <el-form-item label="拾到地点">
          <el-input v-model="editform.fplace" clearable></el-input>
        </el-form-item>
        <el-form-item label="拾到时间">
          <el-input v-model="editform.fdate" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系人信息">
          <el-input v-model="editform.fpeople" clearable></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="editform.fcontact" clearable></el-input>
        </el-form-item>
        <el-form-item label="物品描述">
          <el-input v-model="editform.finformation" clearable></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="gtime">
          <el-date-picker
            v-model="editform.ftime"
            type="datetime"
            placeholder="Select date and time"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <!-- 结束内容主题区 -->
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="editcontentover">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框结束 -->
  </div>
</template>

<script>
export default {
  data() {
    const isNum = (rule, value, callback) => {
      const age = /^[0-9]*$/;
      if (!age.test(value)) {
        callback(new Error("点赞数量只能为数字"));
      } else {
        callback();
      }
    };
    return {
      list: [
        {
          fno: 1,
          fname: "书本",
          fplace: "图书馆",
          fdate: "2021年12月12日",
          fpeople: "谭繁荣",
          fcontact: "123456",
          finformation: "计算机组成原理",
          ftime: "",
          furl: "",
          fstore: "",
        },
      ],
      // 每页显示多少条
      pagesize: "2",
      // 当前页数
      pagenum: "1",
      total: 0,
      query: "",
      // 是否可见对话框
      adduservisible: false,
      // 修改用户区域
      edituservisible: false,
      editform: {
        fno: 1,
        fname: "书本",
        fplace: "图书馆",
        fdate: "2021年12月12日",
        fpeople: "谭繁荣",
        fcontact: "123456",
        finformation: "计算机组成原理",
        ftime: "",
        furl: "",
        fstore: "",
      },
    };
  },
  created() {
    this.gettiaozao();
  },
  methods: {
    gettiaozao() {
      this.$http
        .get("http://localhost:8888/findAllFgood2")
        .then((res) => {
          console.log(res);
          this.list = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(newsize) {
      this.pagesize = newsize;
      this.getTiewenlist();
    },
    handleCurrentChange(newpage) {
      this.pagenum = newpage;
      this.getTiewenlist();
    },
    // 重置添加用户验证
    resetform() {
      this.$refs.addFormRef.resetFields();
      this.$refs.editFormRef.resetFields();
    },
    editcontent(
      fno,
      fname,
      fplace,
      fdate,
      fpeople,
      fcontact,
      finformation,
      ftime,
      furl
    ) {
      this.edituservisible = true;
      this.editform.fno = fno;
      this.editform.fname = fname;
      this.editform.fplace = fplace;
      this.editform.fdate = fdate;
      this.editform.fpeople = fpeople;
      this.editform.fcontact = fcontact;
      this.editform.finformation = finformation;
      this.editform.ftime = ftime;
      this.editform.furl = furl;
    },
    // 修改拾到物品完成 发送请求
    editcontentover() {
      console.log(this.editform.time);

      this.$refs.editFormRef.validate((vaild) => {
        if (!vaild) {
          return this.$message.error("修改信息不符合要求");
        }
        // 向后端发送请求更改数据
        this.$http
          .post("http://localhost:8888/updateFgood", this.editform)
          .then((res) => {
            // if (res.data !== 200) {
            //   return this.$message.error("修改失败");
            // }
            console.log(res);

            this.$message.success("修改成功");
            this.edituservisible = false;
            this.list = res.data;
          });
        this.$refs.editFormRef.resetFields();
      });
    },
    cancel() {
      (this.edituservisible = false), this.$refs.editFormRef.resetFields();
    },
    // 删除拾到物品
    deletetiewen(id) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(id);
          this.$http
            .post("http://localhost:8888/deleteFgood", { fno: id })
            .then((res) => {
              this.gettiaozao();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },
    validate(id, flag) {
      if (flag == 0) {
        this.$message.success("已通过");
      } else {
        this.$message.warning("已改成待审核");
      }
      this.$http
        .post("http://localhost:8888/updateFflag", {
          fno: id,
          flag: flag,
        })
        .then((res) => {
          console.log(res);
          this.list = res.data;
        });
    },
  },
};
</script>
<style scoped>
.box-card {
  height: fit-content;
  max-height: 600px;
  overflow: auto;
}
.el-upload {
  display: inline-block;
}
.biaobailogo {
  position: absolute;
  right: 10px;
  /* width: 100px; */
  top: 10px;
}
.biaobailogo img {
  width: 200px;
}
.box-card {
  position: relative;
}
.tuding {
  position: absolute;
  left: -15px;
  top: 10px;
  z-index: 10;
}
</style>
